<template>
  <div class="component-basic-page" :class="{ 'dark-mode': darkMode }">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">基础组件</h1>
          <p class="page-subtitle">展示系统中常用的基础UI组件，包括按钮、表单、表格、卡片等</p>
        </div>
      </div>
    </div>

    <!-- 组件导航 -->
    <div class="component-nav">
      <el-card class="nav-card" :class="darkMode ? 'shimmer-effect' : ''">
        <el-scrollbar>
          <div class="nav-items">
            <div
              v-for="(nav, index) in componentNavs"
              :key="nav.id"
              :class="[
                'nav-item', 
                { active: activeNav === nav.id },
                darkMode && index % 2 === 0 ? 'float-effect' : ''
              ]"
              @click="scrollToSection(nav.id)"
            >
              <el-icon><component :is="nav.icon" /></el-icon>
              <span>{{ nav.name }}</span>
            </div>
          </div>
        </el-scrollbar>
      </el-card>
    </div>

    <!-- 组件展示区域 -->
    <div class="components-section">
      <!-- 按钮组件 -->
      <div id="buttons" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">按钮 Button</h2>
              <p class="section-desc">常用的操作按钮</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">基础用法</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>默认按钮</h4>
                    <div class="button-group">
                      <el-button>默认</el-button>
                      <el-button type="primary">主要</el-button>
                      <el-button type="success">成功</el-button>
                      <el-button type="info">信息</el-button>
                      <el-button type="warning">警告</el-button>
                      <el-button type="danger">危险</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>朴素按钮</h4>
                    <div class="button-group">
                      <el-button plain>朴素</el-button>
                      <el-button type="primary" plain>主要</el-button>
                      <el-button type="success" plain>成功</el-button>
                      <el-button type="info" plain>信息</el-button>
                      <el-button type="warning" plain>警告</el-button>
                      <el-button type="danger" plain>危险</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>圆角按钮</h4>
                    <div class="button-group">
                      <el-button round>圆角</el-button>
                      <el-button type="primary" round>主要</el-button>
                      <el-button type="success" round>成功</el-button>
                      <el-button type="info" round>信息</el-button>
                      <el-button type="warning" round>警告</el-button>
                      <el-button type="danger" round>危险</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">尺寸和状态</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="demo-item">
                    <h4>不同尺寸</h4>
                    <div class="button-group">
                      <el-button size="large">大型按钮</el-button>
                      <el-button>默认按钮</el-button>
                      <el-button size="small">小型按钮</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="demo-item">
                    <h4>禁用状态</h4>
                    <div class="button-group">
                      <el-button disabled>禁用按钮</el-button>
                      <el-button type="primary" disabled>主要按钮</el-button>
                      <el-button type="success" disabled plain>朴素按钮</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">图标按钮</h3>
            <div class="demo-content">
              <div class="button-group">
                <el-button type="primary" :icon="Edit" />
                <el-button type="primary" :icon="Share" />
                <el-button type="primary" :icon="Delete" />
                <el-button type="primary" :icon="Search">搜索</el-button>
                <el-button type="primary" :icon="Upload">上传</el-button>
                <el-button type="primary" :icon="Download">下载</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 输入框组件 -->
      <div id="inputs" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">输入框 Input</h2>
              <p class="section-desc">用户信息输入组件</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">基础用法</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>基础输入框</h4>
                    <el-input v-model="inputDemo.basic" placeholder="请输入内容" />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>禁用状态</h4>
                    <el-input v-model="inputDemo.disabled" placeholder="禁用状态" disabled />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>可清空</h4>
                    <el-input v-model="inputDemo.clearable" placeholder="可清空" clearable />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">图标输入框</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>前置图标</h4>
                    <el-input v-model="inputDemo.prefixIcon" placeholder="请输入用户名" :prefix-icon="User" />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>后置图标</h4>
                    <el-input v-model="inputDemo.suffixIcon" placeholder="请输入搜索内容" :suffix-icon="Search" />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>密码输入</h4>
                    <el-input v-model="inputDemo.password" type="password" placeholder="请输入密码" show-password />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">文本域</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="demo-item">
                    <h4>基础文本域</h4>
                    <el-input
                      v-model="inputDemo.textarea"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                    />
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="demo-item">
                    <h4>自适应文本域</h4>
                    <el-input
                      v-model="inputDemo.autosizeTextarea"
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      placeholder="自适应高度"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 选择器组件 -->
      <div id="selects" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">选择器 Select</h2>
              <p class="section-desc">用户选择组件</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">基础用法</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>基础选择器</h4>
                    <el-select v-model="selectDemo.basic" placeholder="请选择">
                      <el-option label="选项一" value="option1" />
                      <el-option label="选项二" value="option2" />
                      <el-option label="选项三" value="option3" />
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>可清空</h4>
                    <el-select v-model="selectDemo.clearable" placeholder="请选择" clearable>
                      <el-option label="选项一" value="option1" />
                      <el-option label="选项二" value="option2" />
                      <el-option label="选项三" value="option3" />
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <h4>多选</h4>
                    <el-select v-model="selectDemo.multiple" placeholder="请选择" multiple>
                      <el-option label="选项一" value="option1" />
                      <el-option label="选项二" value="option2" />
                      <el-option label="选项三" value="option3" />
                    </el-select>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 表格组件 -->
      <div id="tables" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">表格 Table</h2>
              <p class="section-desc">数据展示表格</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">基础表格</h3>
            <div class="demo-content">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="age" label="年龄" width="80" />
                <el-table-column prop="position" label="职位" width="150" />
                <el-table-column prop="department" label="部门" width="120" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column label="操作" width="180">
                  <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.row)">
                      编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">斑马纹表格</h3>
            <div class="demo-content">
              <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="age" label="年龄" />
                <el-table-column prop="position" label="职位" />
                <el-table-column prop="department" label="部门" />
                <el-table-column label="状态">
                  <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 卡片组件 -->
      <div id="cards" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">卡片 Card</h2>
              <p class="section-desc">信息展示卡片</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">基础卡片</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card class="demo-card">
                    <template #header>
                      <div class="card-header">
                        <span>基础卡片</span>
                        <el-button type="text">操作</el-button>
                      </div>
                    </template>
                    <div class="card-content">
                      <p>这是一个基础的卡片组件，包含标题和内容区域。</p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="demo-card" shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <span>悬停阴影</span>
                      </div>
                    </template>
                    <div class="card-content">
                      <p>鼠标悬停时显示阴影效果的卡片。</p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="demo-card" shadow="never">
                    <template #header>
                      <div class="card-header">
                        <span>无阴影</span>
                      </div>
                    </template>
                    <div class="card-content">
                      <p>没有阴影效果的简洁卡片。</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">统计卡片</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="6" v-for="(stat, index) in statCards" :key="stat.title">
                  <el-card 
                    class="stat-card" 
                    :class="[stat.type, darkMode ? 'glow-card' : '', index === 0 ? 'pulse-effect' : '']"
                  >
                    <div class="stat-content">
                      <div class="stat-icon">
                        <el-icon><component :is="stat.icon" /></el-icon>
                      </div>
                      <div class="stat-info">
                        <h3 class="stat-value">{{ stat.value }}</h3>
                        <p class="stat-title">{{ stat.title }}</p>
                      </div>
                    </div>
                    <div class="stat-trend">
                      <span :class="['trend-text', stat.trend]">
                        {{ stat.trendText }}
                      </span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 标签和徽章 -->
      <div id="tags" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">标签 & 徽章</h2>
              <p class="section-desc">标记和状态显示</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">标签 Tag</h3>
            <div class="demo-content">
              <div class="tag-group">
                <el-tag>默认标签</el-tag>
                <el-tag type="success">成功标签</el-tag>
                <el-tag type="info">信息标签</el-tag>
                <el-tag type="warning">警告标签</el-tag>
                <el-tag type="danger">危险标签</el-tag>
              </div>
              <div class="tag-group">
                <el-tag size="large">大号标签</el-tag>
                <el-tag>默认标签</el-tag>
                <el-tag size="small">小号标签</el-tag>
              </div>
              <div class="tag-group">
                <el-tag closable>可关闭</el-tag>
                <el-tag type="success" closable>可关闭</el-tag>
                <el-tag type="info" closable>可关闭</el-tag>
              </div>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">徽章 Badge</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="demo-item">
                    <h4>基础徽章</h4>
                    <el-badge :value="12" class="badge-item">
                      <el-button>消息</el-button>
                    </el-badge>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="demo-item">
                    <h4>最大值</h4>
                    <el-badge :value="120" :max="99" class="badge-item">
                      <el-button>通知</el-button>
                    </el-badge>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="demo-item">
                    <h4>小红点</h4>
                    <el-badge is-dot class="badge-item">
                      <el-button>邮件</el-button>
                    </el-badge>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="demo-item">
                    <h4>状态点</h4>
                    <el-badge is-dot type="success" class="badge-item">
                      <el-button>在线</el-button>
                    </el-badge>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 进度条 -->
      <div id="progress" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">进度条 Progress</h2>
              <p class="section-desc">操作进度的展示</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">基础进度条</h3>
            <div class="demo-content">
              <div class="progress-group">
                <el-progress :percentage="50" />
                <el-progress :percentage="100" :format="format" />
                <el-progress :percentage="100" status="success" />
                <el-progress :percentage="100" status="warning" />
                <el-progress :percentage="50" status="exception" />
              </div>
            </div>
          </div>

          <div class="demo-block">
            <h3 class="demo-title">环形进度条</h3>
            <div class="demo-content">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div :class="darkMode ? 'pulse-effect' : ''">
                    <el-progress type="circle" :percentage="0" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div :class="darkMode ? 'float-effect' : ''">
                    <el-progress type="circle" :percentage="25" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div :class="darkMode ? 'pulse-effect' : ''">
                    <el-progress type="circle" :percentage="100" status="success" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div :class="darkMode ? 'float-effect' : ''">
                    <el-progress type="circle" :percentage="70" status="warning" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Download,
  User,
  Operation,
  Document,
  Grid,
  TrendCharts,
  UserFilled,
  Message,
  ShoppingBag,
  Coin
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeNav = ref('buttons')
const darkMode = ref(false)

// 从localStorage读取深色模式状态
const initDarkMode = () => {
  const savedDarkMode = localStorage.getItem('globalDarkMode')
  if (savedDarkMode) {
    darkMode.value = savedDarkMode === 'true'
  }
}

// 监听localStorage变化
const handleStorageChange = (e) => {
  if (e.key === 'globalDarkMode') {
    darkMode.value = e.newValue === 'true'
  }
}

// 组件导航
const componentNavs = ref([
  { id: 'buttons', name: '按钮', icon: 'Operation' },
  { id: 'inputs', name: '输入框', icon: 'Edit' },
  { id: 'selects', name: '选择器', icon: 'Grid' },
  { id: 'tables', name: '表格', icon: 'Document' },
  { id: 'cards', name: '卡片', icon: 'Grid' },
  { id: 'tags', name: '标签徽章', icon: 'Message' },
  { id: 'progress', name: '进度条', icon: 'TrendCharts' }
])

// 输入框演示数据
const inputDemo = reactive({
  basic: '',
  disabled: '禁用状态',
  clearable: '',
  prefixIcon: '',
  suffixIcon: '',
  password: '',
  textarea: '',
  autosizeTextarea: ''
})

// 选择器演示数据
const selectDemo = reactive({
  basic: '',
  clearable: '',
  multiple: []
})

// 表格数据
const tableData = ref([
  {
    name: '张三',
    age: 28,
    position: '前端开发工程师',
    department: '技术部',
    email: 'zhangsan@example.com',
    status: '在职'
  },
  {
    name: '李四',
    age: 32,
    position: '产品经理',
    department: '产品部',
    email: 'lisi@example.com',
    status: '在职'
  },
  {
    name: '王五',
    age: 30,
    position: 'UI设计师',
    department: '设计部',
    email: 'wangwu@example.com',
    status: '请假'
  },
  {
    name: '赵六',
    age: 26,
    position: '后端开发工程师',
    department: '技术部',
    email: 'zhaoliu@example.com',
    status: '在职'
  }
])

// 统计卡片数据
const statCards = ref([
  {
    title: '总用户数',
    value: '12,345',
    icon: 'UserFilled',
    type: 'primary',
    trend: 'up',
    trendText: '↗ 12.5%'
  },
  {
    title: '总订单数',
    value: '8,234',
    icon: 'ShoppingBag',
    type: 'success',
    trend: 'up',
    trendText: '↗ 8.3%'
  },
  {
    title: '总销售额',
    value: '¥89,234',
    icon: 'Coin',
    type: 'warning',
    trend: 'down',
    trendText: '↘ 2.1%'
  },
  {
    title: '消息数量',
    value: '456',
    icon: 'Message',
    type: 'info',
    trend: 'up',
    trendText: '↗ 15.6%'
  }
])

// 方法
const scrollToSection = (sectionId) => {
  activeNav.value = sectionId
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const handleEdit = (row) => {
  ElMessage.success(`编辑用户: ${row.name}`)
}

const handleDelete = (row) => {
  ElMessage.warning(`删除用户: ${row.name}`)
}

const getStatusType = (status) => {
  switch (status) {
    case '在职':
      return 'success'
    case '请假':
      return 'warning'
    case '离职':
      return 'danger'
    default:
      return 'info'
  }
}

const format = (percentage) => {
  return percentage === 100 ? '满' : `${percentage}%`
}

// 监听滚动，更新导航状态
onMounted(() => {
  // 初始化深色模式状态
  initDarkMode()
  
  // 监听localStorage变化
  window.addEventListener('storage', handleStorageChange)
  
  const handleScroll = () => {
    const sections = componentNavs.value.map(nav => nav.id)
    let current = 'buttons'
    
    for (const sectionId of sections) {
      const element = document.getElementById(sectionId)
      if (element) {
        const rect = element.getBoundingClientRect()
        if (rect.top <= 150) {
          current = sectionId
        }
      }
    }
    
    activeNav.value = current
  }
  
  window.addEventListener('scroll', handleScroll)
  
  // 清理函数
  return () => {
    window.removeEventListener('scroll', handleScroll)
    window.removeEventListener('storage', handleStorageChange)
  }
})
</script>

<style scoped>
.component-basic-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  transition: all 0.3s ease;
}

/* 深色模式 - 优化版 */
/* 深色模式 - 优化版 */
.component-basic-page.dark-mode {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: #f1f5f9;
  min-height: 100vh;
}

.component-basic-page.dark-mode .header-content {
  background: linear-gradient(135deg, 
    rgba(30, 41, 59, 0.95) 0%, 
    rgba(51, 65, 85, 0.95) 50%, 
    rgba(100, 116, 139, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.component-basic-page.dark-mode .section-card,
.component-basic-page.dark-mode .nav-card {
  background: linear-gradient(145deg, 
    rgba(30, 41, 59, 0.9) 0%, 
    rgba(51, 65, 85, 0.9) 100%);
  border: 1px solid rgba(100, 116, 139, 0.3);
  backdrop-filter: blur(15px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(148, 163, 184, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.component-basic-page.dark-mode .demo-card,
.component-basic-page.dark-mode .stat-card {
  background: linear-gradient(145deg, 
    rgba(30, 41, 59, 0.85) 0%, 
    rgba(51, 65, 85, 0.85) 100%);
  border: 1px solid rgba(100, 116, 139, 0.25);
  backdrop-filter: blur(12px);
  box-shadow: 
    0 6px 25px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.component-basic-page.dark-mode .section-card:hover,
.component-basic-page.dark-mode .nav-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(102, 126, 234, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
}

.component-basic-page.dark-mode .demo-card:hover,
.component-basic-page.dark-mode .stat-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 10px 35px rgba(0, 0, 0, 0.35),
    0 0 15px rgba(102, 126, 234, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-color: rgba(102, 126, 234, 0.4);
}

/* 为卡片添加光线扫描效果 */
.component-basic-page.dark-mode .section-card::before,
.component-basic-page.dark-mode .nav-card::before,
.component-basic-page.dark-mode .demo-card::before,
.component-basic-page.dark-mode .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(102, 126, 234, 0.1), 
    transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.component-basic-page.dark-mode .section-card:hover::before,
.component-basic-page.dark-mode .nav-card:hover::before,
.component-basic-page.dark-mode .demo-card:hover::before,
.component-basic-page.dark-mode .stat-card:hover::before {
  left: 100%;
}

.component-basic-page.dark-mode .section-card :deep(.el-card__header),
.component-basic-page.dark-mode .nav-card :deep(.el-card__header) {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
  color: #f1f5f9;
  position: relative;
}

.component-basic-page.dark-mode .section-card :deep(.el-card__header)::before,
.component-basic-page.dark-mode .nav-card :deep(.el-card__header)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.component-basic-page.dark-mode .demo-title {
  color: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.3);
  position: relative;
  padding-left: 12px;
}

.component-basic-page.dark-mode .demo-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 统计卡片特殊样式 */
.component-basic-page.dark-mode .stat-card {
  position: relative;
  overflow: hidden;
}

.component-basic-page.dark-mode .stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    #667eea 0%, 
    #764ba2 25%, 
    #f093fb 50%, 
    #f5576c 75%, 
    #4facfe 100%);
  border-radius: 0 0 4px 4px;
}

.component-basic-page.dark-mode .stat-card.primary::after {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.component-basic-page.dark-mode .stat-card.success::after {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.component-basic-page.dark-mode .stat-card.warning::after {
  background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.component-basic-page.dark-mode .stat-card.info::after {
  background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%);
}

.component-basic-page.dark-mode .section-desc,
.component-basic-page.dark-mode .demo-item h4 {
  color: #e2e8f0;
}

.component-basic-page.dark-mode .demo-title {
  color: #f7fafc;
  border-color: rgba(226, 232, 240, 0.3);
}

.component-basic-page.dark-mode .section-title {
  color: #ffffff;
}

.component-basic-page.dark-mode .page-subtitle {
  color: #e2e8f0;
}

.component-basic-page.dark-mode .card-content {
  color: #f1f5f9;
}

.component-basic-page.dark-mode .stat-title {
  color: #e2e8f0;
}

.component-basic-page.dark-mode .stat-value {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.component-basic-page.dark-mode .nav-item {
  color: #e2e8f0;
  background: linear-gradient(145deg, 
    rgba(51, 65, 85, 0.6) 0%, 
    rgba(30, 41, 59, 0.6) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 116, 139, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.component-basic-page.dark-mode .nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(102, 126, 234, 0.1) 0%, 
    rgba(118, 75, 162, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.component-basic-page.dark-mode .nav-item:hover::before {
  opacity: 1;
}

.component-basic-page.dark-mode .nav-item:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(102, 126, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(102, 126, 234, 0.6);
}

.component-basic-page.dark-mode .nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 
    0 6px 20px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(102, 126, 234, 0.8);
}

.component-basic-page.dark-mode .stat-value {
  color: #f1f5f9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.component-basic-page.dark-mode .stat-title {
  color: #cbd5e0;
}

.component-basic-page.dark-mode .card-content {
  color: #e2e8f0;
}

.component-basic-page.dark-mode .stat-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* 深色模式下的页面标题渐变效果 */
.component-basic-page.dark-mode .header-content {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.component-basic-page.dark-mode .header-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.component-basic-page.dark-mode .page-title {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.component-basic-page.dark-mode .page-subtitle {
  color: #cbd5e0;
}

/* 深色模式下的Element Plus组件样式 */
.component-basic-page.dark-mode :deep(.el-input__wrapper) {
  background-color: #374151;
  border-color: #4a5568;
  color: #ffffff;
  box-shadow: 0 0 0 1px #4a5568 inset;
}

.component-basic-page.dark-mode :deep(.el-input__inner) {
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-input__wrapper):hover {
  border-color: #667eea;
  box-shadow: 0 0 0 1px #667eea inset;
}

.component-basic-page.dark-mode :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 1px #667eea inset;
}

.component-basic-page.dark-mode :deep(.el-textarea__inner) {
  background-color: #374151;
  border-color: #4a5568;
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-select .el-input__wrapper) {
  background-color: #374151;
  border-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-select-dropdown) {
  background-color: #374151;
  border-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-select-dropdown__item) {
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-select-dropdown__item:hover) {
  background-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-select-dropdown__item.selected) {
  background-color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-table) {
  background-color: #2d3748;
  color: #ffffff;
  border-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-table th.el-table__cell) {
  background-color: #374151;
  color: #ffffff;
  border-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-table td.el-table__cell) {
  border-color: #4a5568;
  color: #ffffff;
  background-color: #2d3748;
}

.component-basic-page.dark-mode :deep(.el-table tr) {
  background-color: #2d3748;
}

.component-basic-page.dark-mode :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background-color: #374151;
}

.component-basic-page.dark-mode :deep(.el-table__body tr:hover > td.el-table__cell) {
  background-color: #4a5568 !important;
}

.component-basic-page.dark-mode :deep(.el-button--default) {
  background-color: #374151;
  border-color: #4a5568;
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-button--default):hover {
  background-color: #4a5568;
  border-color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-button--text) {
  color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-button--text):hover {
  color: #764ba2;
  background-color: rgba(102, 126, 234, 0.1);
}

.component-basic-page.dark-mode :deep(.el-tag) {
  background-color: #374151;
  border-color: #4a5568;
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-tag--success) {
  background-color: #22543d;
  border-color: #38a169;
  color: #68d391;
}

.component-basic-page.dark-mode :deep(.el-tag--warning) {
  background-color: #744210;
  border-color: #d69e2e;
  color: #f6e05e;
}

.component-basic-page.dark-mode :deep(.el-tag--danger) {
  background-color: #742a2a;
  border-color: #e53e3e;
  color: #fc8181;
}

.component-basic-page.dark-mode :deep(.el-tag--info) {
  background-color: #2d3748;
  border-color: #4a5568;
  color: #a0aec0;
}

.component-basic-page.dark-mode :deep(.el-progress-bar__outer) {
  background-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-progress__text) {
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-badge__content) {
  background-color: #667eea;
  border-color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-switch__core) {
  background-color: #4a5568;
  border-color: #4a5568;
}

.component-basic-page.dark-mode :deep(.el-switch__core .el-switch__action) {
  background-color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-switch.is-checked .el-switch__core) {
  background-color: #667eea;
  border-color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #667eea;
  border-color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-radio__label) {
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #667eea;
  border-color: #667eea;
}

.component-basic-page.dark-mode :deep(.el-checkbox__label) {
  color: #ffffff;
}

/* 深色模式下的通用文本优化 - 最高优先级 */
.component-basic-page.dark-mode {
  color: #60a5fa !important;
}

/* 强制所有文本元素使用亮蓝色 */
.component-basic-page.dark-mode *:not(.el-button):not(.el-tag):not(.el-input):not(.el-select) {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .section-title {
  color: #3b82f6 !important;
  font-weight: 700;
}

.component-basic-page.dark-mode .section-desc {
  color: #93c5fd !important;
  font-weight: 500;
}

.component-basic-page.dark-mode .demo-title {
  color: #60a5fa !important;
  border-bottom-color: rgba(96, 165, 250, 0.5);
  font-weight: 600;
}

.component-basic-page.dark-mode .demo-item h4 {
  color: #60a5fa !important;
  font-weight: 600;
}

.component-basic-page.dark-mode .demo-item {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .demo-content {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .demo-block {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .stat-value {
  color: #3b82f6 !important;
  font-weight: 700;
}

.component-basic-page.dark-mode .stat-title {
  color: #93c5fd !important;
  font-weight: 500;
}

.component-basic-page.dark-mode .nav-item {
  color: #60a5fa !important;
  font-weight: 500;
}

.component-basic-page.dark-mode .nav-item span {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .nav-item.active {
  color: #3b82f6 !important;
}

.component-basic-page.dark-mode .nav-item.active span {
  color: #3b82f6 !important;
}

.component-basic-page.dark-mode .page-title {
  color: #3b82f6 !important;
}

.component-basic-page.dark-mode .page-subtitle {
  color: #93c5fd !important;
}

/* 确保所有卡片内的文本都清晰可见 */
.component-basic-page.dark-mode .el-card {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .el-card * {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .el-card__header {
  color: #3b82f6 !important;
}

.component-basic-page.dark-mode .el-card__header * {
  color: #3b82f6 !important;
}

.component-basic-page.dark-mode .el-card__body {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .el-card__body * {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .el-card__body h1,
.component-basic-page.dark-mode .el-card__body h2,
.component-basic-page.dark-mode .el-card__body h3,
.component-basic-page.dark-mode .el-card__body h4,
.component-basic-page.dark-mode .el-card__body h5,
.component-basic-page.dark-mode .el-card__body h6 {
  color: #3b82f6 !important;
  font-weight: 600;
}

.component-basic-page.dark-mode .el-card__body p,
.component-basic-page.dark-mode .el-card__body span:not(.el-tag),
.component-basic-page.dark-mode .el-card__body div:not(.el-button):not(.el-input):not(.el-select) {
  color: #60a5fa !important;
}

.component-basic-page.dark-mode .el-card__body .demo-item,
.component-basic-page.dark-mode .el-card__body .demo-content,
.component-basic-page.dark-mode .el-card__body .demo-block {
  color: #60a5fa !important;
}

/* 表单元素文本优化 */
/* 表单元素文本优化 */
.component-basic-page.dark-mode :deep(.el-input__inner) {
  color: #f1f5f9 !important;
}

.component-basic-page.dark-mode :deep(.el-textarea__inner) {
  color: #f1f5f9 !important;
}

.component-basic-page.dark-mode :deep(.el-select .el-input__inner) {
  color: #f1f5f9 !important;
}

.component-basic-page.dark-mode :deep(.el-input__inner::placeholder) {
  color: #94a3b8 !important;
}

.component-basic-page.dark-mode :deep(.el-textarea__inner::placeholder) {
  color: #94a3b8 !important;
}

/* 表格文本优化 */
.component-basic-page.dark-mode :deep(.el-table td .cell) {
  color: #e2e8f0 !important;
}

.component-basic-page.dark-mode :deep(.el-table th .cell) {
  color: #f1f5f9 !important;
}

/* 按钮文本优化 */
.component-basic-page.dark-mode :deep(.el-button--default) {
  color: #f1f5f9 !important;
}

.component-basic-page.dark-mode :deep(.el-button--default:hover) {
  color: #ffffff !important;
}

/* 标签文本优化 */
.component-basic-page.dark-mode :deep(.el-tag) {
  color: #f1f5f9 !important;
}

/* 进度条文本优化 */
.component-basic-page.dark-mode :deep(.el-progress__text) {
  color: #f1f5f9 !important;
}

/* 其他元素文本优化 */
.component-basic-page.dark-mode :deep(.el-badge__content) {
  color: #ffffff !important;
}

.component-basic-page.dark-mode :deep(.el-form-item__label) {
  color: #f1f5f9 !important;
}

.component-basic-page.dark-mode :deep(.trend-text) {
  color: inherit !important;
}

.component-basic-page.dark-mode :deep(.trend-text.up) {
  color: #68d391 !important;
}

.component-basic-page.dark-mode :deep(.trend-text.down) {
  color: #fc8181 !important;
}

.component-basic-page.dark-mode :deep(.el-message) {
  background-color: #374151;
  border-color: #4a5568;
  color: #ffffff;
}

.component-basic-page.dark-mode :deep(.el-message--success) {
  background-color: #22543d;
  border-color: #38a169;
  color: #68d391;
}

.component-basic-page.dark-mode :deep(.el-message--warning) {
  background-color: #744210;
  border-color: #d69e2e;
  color: #f6e05e;
}

.component-basic-page.dark-mode :deep(.el-message--error) {
  background-color: #742a2a;
  border-color: #e53e3e;
  color: #fc8181;
}

.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px;
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-left .page-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #fff 0%, #e3f2fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-left .page-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.component-nav {
  margin-bottom: 24px;
  position: sticky;
  top: 20px;
  z-index: 100;
}

.nav-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-items {
  display: flex;
  gap: 16px;
  padding: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #666;
  font-weight: 500;
}

.nav-item:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.components-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.component-section {
  scroll-margin-top: 120px;
}

.section-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.demo-block {
  margin-bottom: 32px;
}

.demo-block:last-child {
  margin-bottom: 0;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.demo-content {
  padding: 0;
}

.demo-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-item h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #666;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.demo-card {
  height: 140px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.demo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 8px 0;
}

.stat-card {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.warning::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-card.info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #333;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.stat-trend {
  padding: 0 20px 20px;
}

.trend-text {
  font-size: 12px;
  font-weight: 600;
}

.trend-text.up {
  color: #67c23a;
}

.trend-text.down {
  color: #f56c6c;
}

.tag-group {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tag-group:last-child {
  margin-bottom: 0;
}

.badge-item {
  margin-right: 20px;
}

.progress-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:deep(.el-card__header) {
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: #fafafa;
  color: #333;
  font-weight: 600;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-button) {
  border-radius: 8px;
}

:deep(.el-progress-bar__outer) {
  border-radius: 6px;
}

:deep(.el-progress-bar__inner) {
  border-radius: 6px;
}

/* 深色模式下的特殊效果类 */
.component-basic-page.dark-mode .glow-card {
  position: relative;
  overflow: hidden;
}

.component-basic-page.dark-mode .glow-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #667eea);
  border-radius: inherit;
  z-index: -1;
  animation: glow-border 3s linear infinite;
}

@keyframes glow-border {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.component-basic-page.dark-mode .shimmer-effect {
  position: relative;
  overflow: hidden;
}

.component-basic-page.dark-mode .shimmer-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 深色模式下的脉冲效果 */
.component-basic-page.dark-mode .pulse-effect {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

/* 深色模式下的浮动效果 */
.component-basic-page.dark-mode .float-effect {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .component-basic-page {
    padding: 12px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .nav-items {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .components-section {
    gap: 24px;
  }
}
</style>
